<template>
	<div class="template-room-outer-wrap">
		<!-- 房间设置权限登录提示 -->
		<alert-bind-phone  v-if="loginMust && !user.logined">
			<template #content>
				<div class="content">本房间设置了进入权限，请先登录！</div>
			</template>
			<template  #footbtn><div class="alert-bind-btn"><router-link to="/login" v-if="!user.logined" style="display: block;height: 100%;">登录</router-link></div></template>
		</alert-bind-phone>
		<!-- 登录账户有钱绑定提示 -->
		<bind-tips style="position: fixed;top:0;left: 0;z-index: 1001;" v-if="user"></bind-tips>
		<!-- 付费房间加入提示 -->
		<confirm-dialog v-if="payDialog" class="recharge-outer-wrap">
			<template #header>
				<div class="confirm-dialog-header">加入会员<router-link :to="{name:'familyHall',params:{eng_name:listQuery.eng_name}}" class="close-icon"></router-link></div>
			</template>
			<template #content>
				<div class="content">
					<div class="recharge-header-tips">
						当前房间为付费房间，需加入会员才可以观看
					</div>
					<div class="new-vip-wrap">
						<div class="vip-header">
							新会员
						</div>
						<div class="vip-pay-info-list">
							<ul>
								<li class="fix border-1px" v-for="(item,index) in payinfoList" :key="index">
									<div class="ubi-wrap fl ell" style="max-width: 5rem;">{{item.price}}币</div>
									<span class="vip-tianshu">{{item.days}}天</span>
									<div class="ubi-checkbox-wrap fr">
										<input type="radio" name="vip-choose" class="clip vip-radio" :id="'pay'+index" :value="index" v-model="payChooseIndex">
										<label :for="'pay'+index" class="vip-radio-label"></label>
									</div>
								</li>
							</ul>
						</div>
						<div class="coin-wrap fix">
							<div class="coin-wrap-left fl ell" style="max-width: 11.25rem;" v-if="payDelta >= 0">U币：{{myCoin}}U币</div>
							<div class="coin-wrap-left fl ell not-enough" style="max-width: 11.25rem;" v-else>U币不足：{{myCoin}}U币</div>
							<div class="coin-wrap-right fr">
								<a href="javascript:;" class="pay-recharge-btn" v-if="payDelta >= 0" @click="roomPay">支付</a>
								<!-- <router-link to="/recharge" class="pay-recharge-btn">去充值</router-link> -->
								<a href="javascript:;" class="pay-recharge-btn" v-else @click="rechargeLogic">去充值</a>
							</div>
						</div>
					</div>
				</div>
				<div class="old-vip-wrap fix border-1px">
					<div class="vip-header fl">
						老会员
					</div>
					<div class="fr">
						<a href="javascript:;" class="application-btn-a" @click="goApplication">去申请</a>
					</div>
				</div>
			</template>
			<!-- <template  #footbtn><div class="foot-btn-wrap flex"><a href="javascript:;" class="foot-btn-a" v-if="hasPay" @click="roomPay">去支付</a><a href="javascript:;" class="foot-btn-a" @click="goRecharge" v-else>去充值</a><a href="javascript:;" class="foot-btn-a application-btn-a" @click="goApplication">去申请</a></div></template> -->
		</confirm-dialog>
		<!-- 付费房间具体充值组件 -->
		<div class="reacharge-outer-wrap" :class="{'layui-m-anim-scale':goRechargeFlag}" v-show="goRechargeFlag">
			<recharge @close="closeRecharge" @close-recharge="goRechargeFlag = false" :room-id='Number(listQuery.room_id)' ref="rechargecomp"></recharge>
		</div>
<!-- 		<alert-bind-phone v-show="rechargeTips" >
			<template #content>
				<div class="content">速去app充值！</div>
			</template>
			<template #footbtn><div class="alert-bind-btn">确定</div><div class="alert-bind-a-wrap" style="margin-top: 1.25rem;"><a class="alert-bind-a" href="javascript:;" style="text-decoration: underline;" @click="rechargeTips = false">关闭</a></div></template>
		</alert-bind-phone> -->
		<!-- 付费房间申请组件 -->
		<application v-if="payDialog" v-show="applicationDialog" :class="{'layui-m-anim-scale':applicationDialog}" @close="closeApplication" :room-id="listQuery.room_id" ref="applicationCom"></application>
		<!-- 密码房输入密码提示 -->
		<alert-bind-phone v-if="isPasswordRoom">
			<template #tips>
				请输入房间密码!
			</template>
			<template #content>
				<div class="password-input-wrap border-4-1px" style="margin-top: 1.1rem;"><input type="password" name="room-password" class="password-input" v-input v-model="listQuery.room_password"></div>
			</template>
			<template  #footbtn><div class="alert-bind-btn" @click="confirmPassword">确定</div><div class="alert-bind-a-wrap" style="margin-top: 1.25rem;"><router-link class="alert-bind-a" style="text-decoration: underline;" :to="'/' + listQuery.eng_name">返回大厅</router-link></div></template>
		</alert-bind-phone>
		<!-- 强制登录房强制登录提示 -->
		<alert-bind-phone v-if="forceLogin">
			<template #tips>
				<div class="tips-wrap">提示</div>
			</template>
			<template #content>
				<div class="content">想观看直播,请先登录！</div>
			</template>
			<template  #footbtn><div class="alert-bind-btn"><router-link to="/login" style="display: block;height: 100%;">登录</router-link></div></template>
		</alert-bind-phone>
		<!-- 骨架屏loading -->
		<detail-skeleton-loading v-if="!skeletonLoading"></detail-skeleton-loading>
		<dynamic-template v-if="initLoading" :type="template_name" :room_id="this.listQuery.room_id" :eng_name="this.listQuery.eng_name" @load-complete="templateLoaded"></dynamic-template>
		<!-- 房间设置权限登录提示 -->
		<alert-bind-phone  v-if="rechargeFromH5">
			<template #content>
				<div class="content">请确认支付是否完成！</div>
			</template>
			<template  #footbtn>
				<div class="alert-bind-btn" @click="hasPayed">已完成支付</div>
				<div class="alert-bind-a-wrap" style="margin-top: 1.25rem;"><a class="alert-bind-a" @click="payFail">支付遇到问题，重新支付</a></div>
			</template>
		</alert-bind-phone>
		<!-- 分组会员房间提示 -->
		<alert-bind-phone  v-if="err.code === 1000016 &&  user.logined">
			<template #content>
				<div class="content"><font color="red">{{err.message}}</font></div>
			</template>
		</alert-bind-phone>
	</div>
</template>

<script>
	import {roomInitRoomConfig} from '@/api/room'
	import {wxPayQueryResult} from '@/api/pay'
	import {payApplication} from '@/api/application'
	import dynamicTemplate from './dynamic_template'
	import bindTips from '@/views/bind_phone'
	import {mapGetters} from 'vuex'
	import alertBindPhone from '@/views/alert_bind_phone/index'
	import ConfirmDialog from '@/components/ConfirmDialog/index'
	import application from '@/components/application/index'
	import mixin from '@/mixins/removeLoading'
	import DetailSkeletonLoading from '@/components/SkeletonLoading/detailLoading'
	import {getRoomPassword,setRoomPassword,loadStorage,removeStorage} from '@/utils/auth'
	import input from '@/directive/input/input'
	import recharge from '@/components/Recharge/index'
	import qs from 'qs'
	require('@/assets/photoswipe/photoswipe.css')
	require('@/assets/photoswipe/default-skin/default-skin.css')
	export default{
		name:'room',
		components:{
			bindTips,
			alertBindPhone,
			ConfirmDialog,
			application,
			dynamicTemplate,
			DetailSkeletonLoading,
			recharge
		},
		provide(){
			return{
				skeletonLoad: this.skeletonLoad,
				rechargeLogic: this.rechargeLogic
			}
		},
		inject:['reload'],
		mixins: [mixin],
		directives:{
			input
		},
		metaInfo(){
			return{
				title:this.roomName,
				meta: [{
				  name: 'keywords',
				  content: '1234tv.com、1234tv财经直播、财经直播平台、财经视频、财经直播系统、财经直播间、财经直播视频、财经直播教程'
				},{
					name: 'description',
					content: '在线分析大盘走势，分享最新资讯，交流投资技巧，老师讲得很精彩，你也来看看吧！',
					itemprop: 'description'
				},{
					itemprop:'name',
					content:this.itemProp.name
				},{
					itemprop:'image',
					content:this.itemProp.image
				}]
			}
		},
		computed:{
			...mapGetters([
			  'user',
				'token'
			])
		},
		data(){
			return{
				template_name: 'default',
				listQuery:{
					room_id:this.$route.params.roomid,
					eng_name:this.$route.params.eng_name,
					room_password:undefined
				},
				roomName:'房间',
				loginMust:false,
				payMessage:'',
				hasPay:false,
				payDialog:false,
				rechargeTips:false,
				applicationDialog:false,
				price:undefined,
				isPasswordRoom:false,
				initLoading:false,
				skeletonLoading:false,
				forceLogin:false,
				itemProp:{
					name:'',
					image:''
				},
				payinfoList:[],
				payChooseIndex: 0,
				payDelta:0,
				myCoin:0,
				goRechargeFlag:false,
				rechargeFromH5:false,
				err:{}
			}
		},
		created(){
			if(getRoomPassword(`${this.$route.params.roomid}`)){
				this.listQuery.room_password = getRoomPassword(`${this.$route.params.roomid}`)
			}
			let parsedUrl = qs.parse(window.location.href.split('?')[1])
			if(parsedUrl.tip === 'rechargeH5' && loadStorage('orderId')){
				this.rechargeFromH5 = true
			}
			roomInitRoomConfig(this.listQuery).then(res=>{
				if(res.data.login_alert_time == 0 && !this.user.logined){
					this.forceLogin = true
				}else{
					this.initLoading = true
					this.listQuery.room_id = res.data.room_id + ''
					if(res.data.template_id === 202){
						this.template_name = 'newversion'
					}else{
						this.template_name = 'default'
					}
					this.roomName = res.data.room_name
					this.itemProp.name = res.data.room_name
					this.itemProp.image = res.data.room_icon
					this.$store.dispatch('setRoomPara',res.data)
				}
				this.$store.commit('SET_LOGIN_MODE_OP',res.data.login_mode_op)
			}).catch(err=>{
				this.err = err
				this.skeletonLoading = true
				if(document.documentElement.classList.contains('tv-loading-complete')){
					document.documentElement.classList.remove('tv-loading-complete')
				}
				document.documentElement.classList.add('tv-loading-complete')
				if('data' in err){
					if(err.data && 'room_id' in err.data){
						this.listQuery.room_id = err.data.room_id + ''
					}
				}
				if(err.code === 1000002){
					this.loginMust = true
					this.$store.commit('SET_LOGIN_MODE_OP',err.data.login_mode_op)
				}else if(err.code === 1000010 || err.code === 1000011){
					this.payinfoList = err.data.room_payinfo_list
					if(this.payinfoList && this.payinfoList.length){
						this.payDialog = true
						this.myCoin = err.data.coin
						if(this.payinfoList.length){
							this.payDelta = this.myCoin - this.payinfoList[0].price
						}
					}else{
						this.$layer.open({
							content: '当前房间为付费房间，房间管理员暂未设置付费金额，请联系房间管理员'
							,skin: 'msg'
							,time: 2
						});
					}
				}else if(err.code === 1000013 || err.code === 1000015){
					this.isPasswordRoom = true
				}else if(err.code === 1000016){
					this.loginMust = true
				}
			})
		},
		methods:{
			rechargeLogic(){
				if(document.domain.indexOf('9ox.cn') === -1){
					this.$layer.open({
						content: '请移步PC支付页面'
						,skin: 'msg'
						,time: 2
					})
					return false
				}
				this.goRechargeFlag = true
			},
			roomPay(){
				payApplication({room_id:this.listQuery.room_id,id:this.payinfoList[this.payChooseIndex].id}).then(res=>{
					this.$layer.open({
						content: res.message
						,skin: 'msg'
						,time: 1//2秒后自动关闭
						,end:()=>{
							this.reload()
						}
					});
				}).catch(err=>{
					if(err.code === 1000017){
						this.$layer.open({
							content: '您已经是会员了，无需支付费用！' 
							,skin: 'msg'
							,time: 1//2秒后自动关闭
							,end:()=>{
								this.reload()
							}
						});
					}
				})
			},
			goRecharge(){
				this.rechargeTips = true
			},
			goApplication(){
				this.applicationDialog = true
				this.$nextTick(()=>{
					this.$refs.applicationCom.init()
				})
			},
			closeApplication(){
				this.applicationDialog = false
			},
			confirmPassword(){
				roomInitRoomConfig(this.listQuery).then(res=>{
					setRoomPassword(this.listQuery.room_password,`${this.$route.params.roomid}`)
					this.reload()
				}).catch(err=>{
				})
			},
			templateLoaded(){
				this.skeletonLoading = true
			},
			skeletonLoad(){
				this.skeletonLoading = !this.skeletonLoading
			},
			closeRecharge({success, coin}){
				this.goRechargeFlag = false
				//充值成功更新当前用户u币数量
				if(success && this.payDialog){
					this.reload()
				}else{
					this.$store.commit('SET_USER', Object.assign({}, this.user, {coin: coin}))
				}
			},
			hasPayed(){
				if(this.payDialog) {
					this.reload()
				} else {
					let orderId = loadStorage('orderId')
					wxPayQueryResult({
						out_trade_no: orderId
					}).then(res => {
						this.rechargeFromH5 = false
						removeStorage('orderId')
						this.$store.commit('SET_USER', Object.assign({}, this.user, {coin: res.data.user_coin}))
					}).catch(err => {
						console.log(err)
					})
				}
			},
			payFail(){
				this.rechargeFromH5 = false
				removeStorage('orderId')
				this.goRechargeFlag = true
			}
		},
		watch: {
			payChooseIndex: {
				handler: function(newVal,oldVal) {
					this.payDelta = this.myCoin - this.payinfoList[newVal].price
				}
			}
		},
		mounted(){
			// document.addEventListener('visibilitychange', this.visibilityChangeHandler)
		},
		destroyed(){
			// document.removeEventListener('visibilitychange', this.visibilityChangeHandler)
		}
	}
</script>

<style lang="scss">
	.room-zan-icon{vertical-align: middle;}
	.recharge-outer-wrap{
		.confirm-dialog-inner-wrap{
			padding-top: 1.25rem;
			.confirm-dialog-header{
				color: #333;
				.close-icon{
					top: 0;
				}
			}
			.vip-header{
				position: relative;
				padding-left: 1.75rem;
				font-size: 1rem;
				line-height: 1.37rem;
				&::before{
					content: '';
					position: absolute;
					width: 0.62rem;
					height: 0.62rem;
					background-color: #4360F0;
					border-radius: 50%;
					left: 0.5rem;
					top: 0;
					bottom: 0;
					margin: auto 0;
				}
			}
			.old-vip-wrap{
				padding: 0 1.5rem;
				line-height: 3.75rem;
				@include border-1px;
				.vip-header{
					line-height: 3.75rem;
				}
				.application-btn-a{
					color: #4360F0;
					font-size: 1rem;
				}
				&::before{
					top: 0;
					height: 0;
				}
			}
			.content{
				padding-bottom: 0;
				font-size: 0.87rem;
				color: #333;
				.new-vip-wrap{
					margin: 1rem 0;
					&::before{
						bottom: -1.2rem;
					}
				}
				.recharge-header-tips{
					padding: 0.62rem 1.12rem;
					background-color: #EAEEFF;
					border-radius: 3px;
					font-size: 0.87rem;
					color: #4360F0;
					line-height: 1.25rem;
				}
				.vip-pay-info-list{
					li{
						margin: 0 2.5rem;
						text-align: center;
						line-height: 3rem;
						.vip-radio:checked + .vip-radio-label{
							background: #4360F0 url(../../assets/images/icon-checkbox-gou.png) no-repeat center;
							background-size: contain;
							border-color: #4360F0;
						}
						.vip-radio-label{
							display: inline-block;
							width: 1.25rem;
							height: 1.25rem;
							border: 1px solid #B0B0B0;
							background-color:  #E2E2E2;
							border-radius: 50%;
							vertical-align: middle;
						}
						.vip-tianshu{
							position: absolute;
							left: 50%;
						}
					}
					li:first-child{
						@include border-1px;
					}
				}
				.coin-wrap{
					margin: 0.62rem 0;
					.pay-recharge-btn{
						display: inline-block;
						width: 4.5rem;
						height: 1.75rem;
						line-height: 1.75rem;
						background-color: #4360F0;
						border-radius: 1rem;
						color: #fff;
						text-align: center;
					}
					.not-enough{
						color: #FF1000;
					}
				}
			}
		}
	}
	.reacharge-outer-wrap{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1001;
		transform: translateY(-100%);
		transition: transform .15s;
		background-color: #fff;
		animation-fill-mode:both;
		animation-duration:0.2s;
		&.active{
			transform: translateY(0%)
		}
	}
</style>
